<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多商品购物车</title>
    <style>
        /* 商品列表样式 */
        .product-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            padding: 20px;
        }

        .product-item {
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }

        /* 购物车样式 */
        .cart-container {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #fff;
            padding: 20px;
            width: 350px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border-radius: 8px;
        }

        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .quantity-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .quantity-btn {
            width: 28px;
            height: 28px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #f8f8f8;
            cursor: pointer;
        }

        .remove-btn {
            color: #ff4444;
            background: none;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
	<!-- 商品列表 -->
	<div class="product-list">
	    <div class="product-item" data-id="1" data-price="199">
	        <h3>智能手机</h3>
	        <p>¥199.00</p>
	        <button class="add-to-cart">加入购物车</button>
	    </div>
	    <div class="product-item" data-id="2" data-price="299">
	        <h3>蓝牙耳机</h3>
	        <p>¥299.00</p>
	        <button class="add-to-cart">加入购物车</button>
	    </div>
	    <div class="product-item" data-id="3" data-price="599">
	        <h3>智能手表</h3>
	        <p>¥599.00</p>
	        <button class="add-to-cart">加入购物车</button>
	    </div>
	</div>

	<!-- 购物车 -->
	<div class="cart-container">
	    <h2>购物车 (<span id="cart-count">0</span>)</h2>
	    <div id="cart-items">
	    	
	    </div>
	    <div class="cart-total" style="margin-top: 15px; font-weight: bold;">
	        总计：¥<span id="total-price">0.00</span>
	    </div>
	</div>

		<script>
			
	
			let cart = [];


			// 购物车元素
			let cartItems = document.getElementById("cart-items");

			document.addEventListener("click", (e) => {
				// 事件委托 一定判断点击的是哪个按钮
				if (e.target.classList.contains("add-to-cart")) {
					let product = e.target.closest(".product-item")
					// console.log(product.dataset.id);
					console.log((product.querySelector("p").innerText).replace("¥", ""));
					addCartItem({
						id: product.dataset.id,
						name: product.querySelector("h3").innerText,
						quantity: 1,
						price: (product.querySelector("p").innerText).replace("¥", "")
					})
					// console.log(cart);
					updateCart();
				}
			})

			// 	
			cartItems.addEventListener("click", (e) => {
				console.log(e.target);
				// let cartItem = e.target.closest(".cart-item");
				let cartItem = e.target.parentElement.parentElement;
				console.log(cartItem);
				let id = cartItem.dataset.id;
				if (e.target.classList.contains("increase")) {
					updateItemQuantity(id, 1);
				}else if (e.target.classList.contains("decrease")) {
					updateItemQuantity(id, -1);
				}if (e.target.classList.contains("remove-btn")) {
					removeItem(id);
				}
				updateCart();

			})

			// 实现显示
			// 将当前的显示内容清空
			// 重新渲染
			let updateCart = () => {
				cartItems.innerHTML = "";
				cart.forEach((item) => {
					let div = document.createElement("div");
					div.className = ".cart-item";
					div.dataset.id = item.id;
					div.innerHTML = `
						<div>
                            <h4>${item.name}</h4>
                            <p>单价：¥${item.price}</p>
                        </div>
                        <div class="quantity-controls">
                            <button class="quantity-btn decrease">-</button>
                            <span>${item.quantity}</span>
                            <button class="quantity-btn increase">+</button>
                            <button class="remove-btn">删除</button>
                        </div>
					`;
					cartItems.appendChild(div);
				});
			}




			

			

			let addCartItem = (cartItem) => {
				// 使用find函数
				let findCartItem = cart.find((item) => {
					return item.id === cartItem.id;
				})
				if (findCartItem) {
					findCartItem.quantity++;
				}else {
					cart.push(cartItem);
				}
			}
			


			let removeItem = (id) => {
				cart = cart.filter((item) => {
					// 过滤条件
					// 要保留商品项id 和当前不想等的 
					return item.id !== id;
				})

			}
			


			// 改变数量
			let updateItemQuantity = (id, count) => {
				// 校验一下count的值合法性
				// 找到了改变数量
				let findCartItem = cart.find((item) => {
						return item.id === id;
					})
				// 没找到的情况
				if (!findCartItem) {
					return;
				}
				// 找到了
				findCartItem.quantity += count;

				// 判断是否到0
				if (findCartItem.quantity < 1) {
					cart = cart.filter((item) => {
						// 过滤条件
						// 要保留商品项id 和当前不想等的 
						return item.id !== id;
					})	
				}
			}
			
			
		
			// 做统计
			let totalCount = 0;
			let totalPrice = 0;
			cart.forEach((item, index) => {
				totalCount += item.quantity;
				totalPrice += item.price * item.quantity;
			});


			// addCartItem(cartItem);
			// updateItemQuantity(2, -3);
			// removeItem(2);


			
			// console.log(cart);
			// console.log(totalCount);
			// console.log(totalPrice);


		</script>
	</body>
</html>